<template>
<div class="home">
  <v-header></v-header>
    <div class="img">
      <img src="@/assets/images/news/GKPT.png" alt="">
    </div>
    <div class="section">
      <div class="hot-news">
        <div class="search-list">
          <search @searchQuery='searchQuery'></search>	
        </div>
        <div class="hot-list-box">
          <div class="hot-list-area">
            <div class="hot-list-item" v-for="item in listData" :key="item.ID">
              <div class="hot-list-date">
                <div class="hot-list-year">{{item.YEAR}}</div>
                <div class="hot-list-day">{{item.DAY}}</div>
              </div>
              <div class="hot-list-title" @click="newsJump(item.ID)">{{item.BI_TITLE}}</div>
            </div>
          </div>
        </div>
        <div class="hot-pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="listTotal"
            :page-size.sync="listSize"
            @current-change='pageTurning'>
          </el-pagination>
        </div>
      </div>
  </div>
  <!-- <div class="footer"> -->
     <v-footer class="footer"></v-footer>
  <!-- </div> -->
  
</div>


</template>

<script>
import VHeader from '@/views/layout/header'
import VFooter from '@/views/layout/footer'
import search from './Search.vue'
import GetCompanyNews from '../../../assets/json/GetCompanyNews.json'
export default {
  name: 'news',
  components: {
    VHeader,
    VFooter,
    search
  },
  data() {
    return {
      dataItem:[],
      fromFather: [],
      listData: [],
      listTotal: 0,
      listSize: 12,
      listType: ''
    }
  },
  created() {
    this.dataItem = GetCompanyNews
    this.listData.forEach(item => {
        item.YEAR = item.PUSH_DATE.substring(0,4)
        item.DAY = item.PUSH_DATE.substring(5,10)
      })
    if(!this.$route.params.type) {
      this.listType = this.$route.params.type || window.localStorage.getItem('listType')
    } else {
      window.localStorage.setItem('listType', this.$route.params.type)
      this.listType = this.$route.params.type
    }
    switch( this.listType ){
      case 'hot':
        this.newsListData({
          BI_TYPE: '4',
          PageIndexs: '1',
          PageSizes: this.listSize
        })
        this.crumbsTitle(this.$route.matched, 'hot')
        break
      case 'info':
        this.newsListData({ 
          BI_TYPE: '0',
          PageIndexs: '1',
          PageSizes: this.listSize
        })
        this.crumbsTitle(this.$route.matched, 'info')
        break
      case 'dynamic':
        this.newsListData({ 
          BI_TYPE: '1',
          PageIndexs: '1',
          PageSizes: this.listSize
        })
        this.crumbsTitle(this.$route.matched, 'dynamic')
        break
      case 'policy':
        this.newsListData({ 
          BI_TYPE: '2',
          PageIndexs: '1',
          PageSizes: this.listSize
        })
        this.crumbsTitle(this.$route.matched, 'policy')
        break
    }
  },
  methods: {
    crumbsTitle(arr, type) {
      switch(type) {
      case 'hot':
        arr[arr.length -1].meta.title = '热门资讯'
        break
      case 'info':
        arr[arr.length -1].meta.title = '行业资讯'
        break
      case 'dynamic':
        arr[arr.length -1].meta.title = '平台动态'
        break
      case 'policy':
        arr[arr.length -1].meta.title = '政策解读'
        break
      }
      return this.fromFather = arr
    },
    pageTurning(index) {
      switch( this.listType ){
      case 'hot':
        this.newsListData({
          BI_TYPE: '4',
          PageIndexs: index,
          PageSizes: this.listSize
        })
        break
      case 'info':
        this.newsListData({ 
          BI_TYPE: '0',
          PageIndexs: index,
          PageSizes: this.listSize
        })
        break
      case 'dynamic':
        this.newsListData({ 
          BI_TYPE: '1',
          PageIndexs: index,
          PageSizes: this.listSize
        })
        break
      case 'policy':
        this.newsListData({ 
          BI_TYPE: '2',
          PageIndexs: index,
          PageSizes: this.listSize
        })
        break
      }
    },
    // 跳转新闻详情
    newsJump(id) {
      this.$router.push({name: 'router.newsDetails', params: {id}})
    },
    // 搜索
    searchQuery(val) {
      if(this.$route.name !== 'searchResult') {
        this.$router.push({name: 'router.searchResult', params: {text: val}})
      }
    },
    // 新闻列表(行业资讯、平台动态、政策解读、热门资讯)
    newsListData(options) {
      let newsData = this.dataItem.data
      newsData.forEach(item => {
        item.YEAR = item.PUSH_DATE.substring(0,4)
        item.DAY = item.PUSH_DATE.substring(5,10)
      })
      this.listData = []
      if(this.dataItem.code ==='200') {
        this.listTotal = parseInt(this.dataItem.dataTotal)	
        switch (options.BI_TYPE) {
        case '0':
          this.listData = newsData
          break
        case '1':
          this.listData = newsData
          break
        case '2':
          this.listData = newsData
          break
        case '4':
          this.listData = newsData
          break
        default:
          break
        }
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.home{
  display: flex;
  flex-direction: column;
  height: 100%;
   .img{
    width: 100%;
    height:249px;
      img{
        width: 100%;
        height: 100%;
      }
  }
    .section {
      width: 1200px;
      flex: 1 0 auto;
      margin: 0 auto;
    }
    .footer{
      flex: 0 0 auto;
  }
}

.crumbs {
	font-size: 16px;
	color: #3D3D65;
	margin: 48px 0 38px;
}
.search-list {
	margin: 50px 0;
}
.hot-list-item {
	display: flex;
	font-size: 16px;
}
.hot-list-date {
	color: #3D3D65;
	margin-right: 38px;
	display: flex;
	line-height: 36px;
	margin-top: 10px;
}
.hot-list-year {
	padding: 0 10px;
	background: #EAEAEA;
	margin-right: 6px;
}
.hot-list-day {
	padding: 0 15px;
	background: #EAEAEA;
  white-space: nowrap;
}
.hot-list-title {
	flex-grow: 1;
	border-bottom: 1px dotted #979797;
	cursor: pointer;
	color: #3D3D65;
	line-height: 36px;
	box-sizing: border-box;
	margin-top: 10px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	&:hover {
		color: #2d87fa;
	}
}
.hot-pagination {
	display: flex;
	justify-content: center;
	margin: 50px auto;
}


</style>